<template>
  <tar-bar>
    <tar-bar-item path="/home" >
      <!--dom 中使用路径需要用 ~ 来识别配置的别名-->
      <van-icon slot="item-icon" name="wap-home" color="#C0C0C0" size="30"/> 
      <van-icon slot="item-icon-active" name="wap-home" color="#B22222" size="30"/>
      <div slot="item-text">首页</div>
    </tar-bar-item>
    <tar-bar-item path="/buy">
      <van-icon slot="item-icon" name="bag" color="#C0C0C0" size="30"/>
      <van-icon slot="item-icon-active" name="bag" color="#B22222" size="30"/>
      <div slot="item-text">购买</div>
    </tar-bar-item>
    <tar-bar-item path="/cart">
      <div class="cart" slot="item-icon" >
        <div class="nei">
          <van-icon  name="shopping-cart" color="#fff" size="40" />
        </div>
      </div>
      <div class="cart" slot="item-icon-active" >
        <div class="nei">
          <van-icon  name="shopping-cart" color="#fff" size="40" />
        </div>
      </div>
    </tar-bar-item>
    <tar-bar-item path="/location">
      <van-icon slot="item-icon" name="map-marked"  color="#C0C0C0" size="30"/>
      <van-icon slot="item-icon-active" name="map-marked" color="#B22222" size="30"/>
      <div slot="item-text">定位</div>
    </tar-bar-item>
    <tar-bar-item path="/me">
      <van-icon slot="item-icon" name="manager" color="#C0C0C0" size="30"/>
      <van-icon slot="item-icon-active" name="manager" color="#B22222" size="30"/>
      <div slot="item-text">个人</div>
    </tar-bar-item>
  </tar-bar>
</template>

<script>
    import TarBar from 'components/common/tarbar/TarBar'
    import TarBarItem from 'components/common/tarbar/TarBarItem'
    export default {
        name: "MainTarBar",
        components: {
            TarBar,TarBarItem
        }
    }
</script>

<style scoped lang="scss">
.cart{
  height: 4rem;
  width: 4rem;
  border: 1rem solid #fff;
  border-radius: 50%;
  background-color: #b22222;
  margin: 0px auto;
  margin-top: -2rem;
  .nei {
    position: relative;
    top: 0.5rem;
  }
}
</style>